<template>
  <Tree :data="dataList" :render="renderContent"></Tree>
</template>
<script>
import { dataList, openidArray } from "./data.js";
export default {
  data() {
    return {
      dataList: dataList,
      buttonProps: {
        type: "default",
        size: "small"
      }
    };
  },
  methods: {
    openLibraryTreeNode(libraryArray, openidArray) {
      if (!openidArray || openidArray.length == 0) {
        return false;
      }
      openidArray.find(openid => {
        let index = libraryArray.findIndex(library => {
          return library.id == openid;
        });
        if (index > -1 && libraryArray[index].children) {
          let copyNode = libraryArray[index];
          copyNode.expand = true;
          this.$set(libraryArray, index, copyNode);
          this.openLibraryTreeNode(libraryArray[index].children, openidArray);
        } else if (index > -1) {
          this.libraryId = libraryArray[index].id;
          let copyNode = libraryArray[index];
          copyNode.expand = true;
          copyNode.background = "#dedede";
          this.$set(libraryArray, index, copyNode);
          this.resetLibTree();
        }
      });
    },
    resetLibTree() {
      this.dataList = JSON.parse(JSON.stringify(this.dataList));
    },
    renderContent(h, { root, node, data }) {
      return h(
        "span",
        {
          style: {
            display: "inline-block",
            width: "100%",
            background: data.background
          }
        },
        [
          h("span", [
            h("Icon", {
              props: {
                type: data.icon
              },
              style: {
                marginRight: "8px"
              }
            }),
            h("span", data.name)
          ]),
          h("span", {
            style: {
              display: "inline-block",
              float: "right",
              marginRight: "32px"
            }
          })
        ]
      );
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.openLibraryTreeNode(this.dataList, openidArray);
      // setTimeout(() => {}, 2000);
    });
  }
};
</script>
<style>
.demo-tree-render .ivu-tree-title {
  width: 100%;
}
</style>
